<template>
	<view class="content">
		<view class="pageHeader">
			公益仓
			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</a>
		</view>
		
		<view style="padding-top: 170upx;">
			<!-- 热门推荐 -->
			<view class="flex aic">
				<view v-for="(item,index) in choosearr" :key="index" class="flex aic flex-1 jc-center" style="font-size: 28upx;text-align: center;padding: 12upx 0;background-color: #fff;"
				 @click="eachchoose(index)">
					<text :class="index==chooseIndex?'topactive':''">{{item.name}}</text>
					<view style="margin-left:10upx;" v-if="item.timage==1||item.bimage==1">
						<image src="../../static/f-1.png" class="chooseicon topicon" v-show="item.order==1"></image>
						<!-- <view style="width:24upx;height: 2upx;background-color: #888;margin:4upx 0 4upx -6upx;"></view> -->
						<image src="../../static/f-1.png" class="chooseicon btmicon" style="margin-top: 6upx;" v-show="item.order==2"></image>
					</view>
				</view>
			</view>
			<view style="z-index:1;padding: 20upx 0upx 22upx;">
				<scroll-view scroll-y="true" class="scroll-Y" >
					<view v-if="hotgoods.length===0" class="empty">
						<image src="/static/empty.png" mode="widthFix"></image>
						<view class="empty-tips">
							暂无商品
						</view>
					</view>
					<view style="padding: 20upx 30upx;display: flex;flex-wrap: wrap;" class="hot-goodbox">
						<view class="gooditem" v-for="(item,index) in hotgoods" :key="index" @click="productDetail(item.id)">
							<view>
								<image :src="item.images" style="height: 288upx;width:100%;border-radius: 20upx 20upx 0 0;"></image>
							</view>
							<view style="padding: 14upx;">
								<view class="goodtitle">{{item.title}}</view>
								<view style="color: #EC6104;font-size: 26upx;margin: 8upx 0;">￥{{item.price}}
									<text v-if="Number(item.integral)>0" style="color: #666;font-size: 22upx;">({{item.integral}}VS)</text>
								</view>
								<view style="color: #999;font-size: 22upx;text-decoration: line-through;">{{item.original_price}}</view>
							</view>
						</view>
					</view>
					<view class="loading">{{ loadingText }}</view>
				</scroll-view>
			</view>
		</view>

	</view>


</template>
<script>
	import postAjax from '../../API/postAjax.js'
	export default {
		data() {
			return {
				// 快递xinxi
				userToken: '',
				//头部筛选的index
				chooseIndex: 0,
				// 头部的筛选
				choosearr: [{
					'name': '综合',
					'timage': 0,
					'bimage': 0
				}, {
					'name': '销量',
					'timage': 1,
					'bimage': 1,
					'order': 0
				}, {
					'name': '价格',
					'timage': 1,
					'bimage': 1,
					'order': 0
				}],
				order_by: "",
				// 热门的产品信息 -- 搜索的产品信息
				hotgoods: [],
				page : 1,
				loadingText: '加载中...'
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.get_hot_goods()
		},
		methods: {
			// 返回上一页面
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
			//滚动到底部
			onReachBottom:function(){
				this.get_hot_goods();
			},
			
			eachchoose(ind) {
				let that = this;
				that.chooseIndex = ind
				that.choosearr[ind]['order'] = that.choosearr[ind]['order'] == 1 ? 2 : 1
				if (ind == 1) {

					that.order_by = that.choosearr[ind]['order'] == 1 ? "sales_count desc" : "sales_count asc";
				} else if (ind == 2) {
					that.order_by = that.choosearr[ind]['order'] == 1 ? "price desc" : "price asc";
				}
				that.hotgoods=[]
				that.get_hot_goods();
			},
			// 跳转到详情页
			productDetail(id) {
				uni.navigateTo({
					url: "../order/detail?id=" + id
				})
			},
			// 获取
			get_hot_goods() {
				let that = this
				uni.showNavigationBarLoading();
				let postdata ={
					order_by:that.order_by,
					m:0,
					n:8
				}
				// 列表
				let balanceList = [];
				postAjax('index/interestlist', postdata, function(data) {
					console.log(data)
					if (data.code == 0) {
						balanceList = data.data
						if (balanceList.length > 0) {
							that.hotgoods = that.hotgoods.concat(balanceList);
				
							that.page++; //每触底一次 page +1
						} else {
							that.loadingText = '已加载全部';
						}
				
						if(that.hotgoods.length<10){
							that.loadingText = '';
						}
						
						uni.hideNavigationBarLoading();
					}else{
						that.get_hot_goods()
					}
				})
			},
			search() {
				let that = this

				uni.navigateTo({
					url: '../hotfunc/goodslist?keywords=' + that.searchString.trim(),

					animationDuration: 300
				})

			}

		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F9F9F9;
	}
	.loading {
		text-align: center;
		line-height: 50px;
		font-size: 30upx;
		color: #666;
	}
	.pageHeader {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 128upx;
		background-color: #1D84E8;
		line-height: 128upx;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 40upx;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx;
		display: block;
	}

	.topactive {
		color: #EC6104;
	}

	.chooseicon {
		width: 12upx;
		height: 20upx;
		display: block;
	}
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;
	
	}
	
	.empty image {
		width:240upx;
		margin-top: 50upx;
	}
	
	.empty-tips {
		display: flex;
		font-size: 30upx;
		margin-top: 20upx;
		color: #666;
	
	}
	.topicon {
		transform: rotate(-90deg);
	}

	.btmicon {
		transform: rotate(90deg);
	}

	.flex-1 {
		flex: 1
	}

	.gooditem {
		background-color: #fff;
		color: #fff;
		font-size: 28upx;
		border-radius: 20upx;
		width: 48%;
		margin-bottom: 20upx;
	}

	.hot-goodbox>.gooditem:nth-child(2n+2) {
		margin-left: 4%;
	}

	.goodtitle {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #333;
	}

	.keyitem {
		display: inline-block;
		padding: 16upx 24upx;
		color: #666;
		font-size: 24upx;
		border-radius: 6upx;
		border: 2upx solid #C1C3C5;
		margin: 0 18upx 14upx;
		max-width: 250upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
